<template>
    <div id="test">
        <!--<div class="parent">-->
            <!--<div class="kid"></div>-->
            <!--<div class="kid2"></div>-->
        <!--</div>-->
        <div v-for="item in listData" :key="item.no">
            {{`${item.no}: ${item.text}`}}
        </div>
    </div>
</template>

<script>
	export default {
		data() {
			return {
				listData1: [
					{no: 1, text: '第一条'},
					{no: 2, text: '第二条'},
					{no: 3, text: '第三条'},
					// {no: 4, text: '第四条'},
					// {no: 5, text: '第五条'},
					// {no: 6, text: '第六条'},
				]
			}
		},
		asyncData({store, route}) {
			return store.dispatch('fetch_testData')
		},
		computed: {
			listData() {
				return this.$store.state.items.testList
			}
		},
		mounted() {
			console.log(this.$store.state.testList)
		}
	}
</script>

<style scoped lang="stylus">
    /*test*/
    #test
        /*position relative*/
    .parent
        width 600px
        height 200px
        border 1px solid #ccc
        /*overflow hidden*/
        .kid
            float left
            display inline-block
            width 100px
            height 50px
            background-color #e5e5e5
            /*margin-top 10%*/
            /*padding-left 50%*/
            /*padding-top 25%*/
            margin-top 10px
            /*margin-bottom 20px*/
            margin-right 20px
        .kid2
            /*display inline-block*/
            width 100px
            height 50px
            background-color #a5a5a5
            margin-left 20px
            clear both
</style>